<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">utils/color.js | API</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<link rel="stylesheet" href="./inject/css/0-vue.css"><link rel="stylesheet" href="./inject/css/0-app.css"><link rel="stylesheet" href="./inject/css/0-esdoc.css"><script src="./inject/script/0-custom.js"></script><meta name="description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="API"><meta property="twitter:description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/easysoft/xuanxuan.git"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/color.js~Color.html">Color</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/delay-action.js~DelayAction.html">DelayAction</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/status.js~Status.html">Status</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/status.js~StatusKeeper.html">StatusKeeper</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/utils/task-queue.js~TaskQueue.html">TaskQueue</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createDate">createDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createPhpTimestramp">createPhpTimestramp</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatDate">formatDate</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatSpan">formatSpan</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getTimeBeforeDesc">getTimeBeforeDesc</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isSameDay">isSameDay</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isSameMonth">isSameMonth</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isSameYear">isSameYear</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isToday">isToday</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isYestoday">isYestoday</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-classes">classes</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-escape">escape</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getSearchParam">getSearchParam</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isWebUrl">isWebUrl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-linkify">linkify</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-rem">rem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-strip">strip</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-cutImage">cutImage</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getImageInfo">getImageInfo</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-limittimepromise">limittimepromise</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-mdifileicon">mdifileicon</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-pinyin">pinyin</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-plain">plain</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-matchScore">matchScore</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatKeyDecoration">formatKeyDecoration</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getKeyDecoration">getKeyDecoration</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isOnlyModifyKeys">isOnlyModifyKeys</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getCodeFromString">getCodeFromString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-longShadow">longShadow</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-skinStyle">skinStyle</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-sortList">sortList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-clearStore">clearStore</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getStoreItem">getStoreItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getStoreLength">getStoreLength</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-removeStoreItem">removeStoreItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-setStoreItem">setStoreItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-storeForEach">storeForEach</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-storeGetAll">storeGetAll</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatBytes">formatBytes</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-formatString">formatString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-ifEmptyStringThen">ifEmptyStringThen</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isEmptyString">isEmptyString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isNotEmptyString">isNotEmptyString</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-timesequence">timesequence</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-TIME_DAY">TIME_DAY</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-renderer">renderer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-fileIcons">fileIcons</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-BYTE_UNITS">BYTE_UNITS</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">utils/color.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/**
 * &#x5341;&#x516D;&#x8FDB;&#x5236;&#x5339;&#x914D;&#x6B63;&#x5219;&#x8868;&#x8FBE;&#x5F0F;
 * @type {RegExp}
 * @private
 */
const hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

/**
 * &#x5C06;&#x6307;&#x5B9A;&#x6570;&#x503C;&#x5927;&#x5C0F;&#x4FEE;&#x6B63;&#x4E3A;&#x6307;&#x5B9A;&#x533A;&#x95F4;&#x8303;&#x56F4;&#x5185;
 * @param {number} n &#x8981;&#x4FEE;&#x6B63;&#x7684;&#x503C;
 * @param {number} end &#x6700;&#x5927;&#x503C;
 * @param {number} start &#x6700;&#x5927;=&#x5C0F;&#x503C;
 * @return {number}
 * @private
 */
const fit = (n, end, start) =&gt; (Math.min(Math.max(n, start !== undefined ? start : 0), end !== undefined ? end : 255));

/**
 * &#x5C06;&#x6307;&#x5B9A;&#x6570;&#x503C;&#x4FEE;&#x6B63;&#x4E3A;&#x4E0D;&#x8D85;&#x8FC7;&#x7ED9;&#x5B9A;&#x7684;&#x6700;&#x5927;&#x503C;
 * @param {number} v &#x8981;&#x4FEE;&#x6B63;&#x7684;&#x503C;
 * @param {number} max &#x6700;&#x5927;&#x503C;
 * @return {number}
 * @private
 */
const clamp = (v, max) =&gt; (fit(v, max));

/**
 * &#x5C06;&#x5B57;&#x7B26;&#x4E32;&#x8F6C;&#x6362;&#x4E3A;&#x6570;&#x503C;&#x7C7B;&#x578B;&#xFF0C;&#x5982;&#x679C;&#x5DF2;&#x7ECF;&#x662F;&#x6570;&#x503C;&#x7C7B;&#x578B;&#xFF0C;&#x5219;&#x8FD4;&#x56DE;&#x539F;&#x503C;
 * @param {any} n &#x8981;&#x8F6C;&#x6362;&#x7684;&#x503C;
 * @return {number}
 * @private
 */
const number = n =&gt; (typeof n === &apos;number&apos; ? n : parseFloat(n));

/**
 * &#x5C06;&#x6307;&#x5B9A;&#x6570;&#x503C;&#x4FEE;&#x6B63;&#x4E3A;&#x4E0D;&#x8D85;&#x8FC7;&#x7ED9;&#x5B9A;&#x7684;&#x6700;&#x5927;&#x503C;&#xFF0C;&#x5982;&#x679C;&#x7ED9;&#x5B9A;&#x7684;&#x6570;&#x503C;&#x662F;&#x5B57;&#x7B26;&#x4E32;&#x5219;&#x5148;&#x8F6C;&#x6362;&#x4E3A;&#x6570;&#x503C;&#x7C7B;&#x578B;
 * @param {number} v &#x8981;&#x4FEE;&#x6B63;&#x7684;&#x503C;
 * @param {number} max &#x6700;&#x5927;&#x503C;
 * @return {number}
 * @private
 */
const clampNumber = (x, max) =&gt; (clamp(number(x), max));

/**
 * &#x5C06;&#x6307;&#x5B9A;&#x6570;&#x503C;&#x4FEE;&#x6B63; RGB &#x5206;&#x91CF;&#x53D6;&#x503C;&#x8303;&#x56F4;&#xFF0C;&#x5373; `0 &lt;= x &lt;= 256`
 * @param {number} x &#x8981;&#x4FEE;&#x6B63;&#x7684;&#x503C;
 * @return {number}
 * @private
 */
const convertToRgbInt = x =&gt; (Number.parseInt(clampNumber(x, 255), 10));

/**
 * &#x5C06; 16 &#x8FDB;&#x5236;&#x989C;&#x8272;&#x503C;&#x5B57;&#x7B26;&#x4E32;&#x8F6C;&#x6362;&#x4E3A; RGB &#x5BF9;&#x8C61;
 * @param {string} hex 16 &#x8FDB;&#x5236;&#x5B57;&#x7B26;&#x4E32;
 * @return {{r: number, g: number, b: number, a: number}}
 * @private
 */
const hexToRgb = hex =&gt; {
    if (hex &amp;&amp; hexReg.test(hex)) {
        hex = hex.toLowerCase();
        if (hex.length === 4) {
            let hexNew = &apos;#&apos;;
            for (let i = 1; i &lt; 4; i++) {
                hexNew += hex.slice(i, i + 1).concat(hex.slice(i, i + 1));
            }
            hex = hexNew;
        }

        const hexChange = [];
        for (let i = 1; i &lt; 7; i += 2) {
            hexChange.push(Number.parseInt(`0x${hex.slice(i, i + 2)}`, 16));
        }
        return {
            r: hexChange[0],
            g: hexChange[1],
            b: hexChange[2],
            a: 1
        };
    }
    throw new Error(`Wrong hex string! (hex: ${hex})`);
};

/**
 * &#x5224;&#x65AD;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;&#x4E32;&#x662F;&#x5426;&#x662F;&#x989C;&#x8272;&#x503C;&#x7684;&#x6709;&#x6548;&#x8868;&#x793A;&#x65B9;&#x5F0F;
 * @param {string} hex &#x8981;&#x5224;&#x65AD;&#x7684;&#x5B57;&#x7B26;&#x4E32;
 * @return {boolean}
 * @private
 */
const isColor = hex =&gt; (typeof hex === &apos;string&apos; &amp;&amp; (hex.toLowerCase() === &apos;transparent&apos; || hexReg.test(hex.trim().toLowerCase())));

/**
 * &#x5C06;&#x4E00;&#x4E2A; hsl &#x989C;&#x8272;&#x8868;&#x793A;&#x5BF9;&#x8C61;&#x8F6C;&#x6362;&#x4E3A; rgb &#x8868;&#x793A;&#x5BF9;&#x8C61;
 * @param {{h: number, s: number, l: number, a: number}} hsl hsl &#x8868;&#x793A;&#x5BF9;&#x8C61;
 * @return {{r: number, g: number, b: number, a: number}}
 * @private
 */
const hslToRgb = hsl =&gt; {
    const hue = h =&gt; {
        h = h &lt; 0 ? h + 1 : (h &gt; 1 ? h - 1 : h);
        if (h * 6 &lt; 1) {
            return m1 + ((m2 - m1) * h * 6);
        }
        if (h * 2 &lt; 1) {
            return m2;
        }
        if (h * 3 &lt; 2) {
            return m1 + ((m2 - m1) * ((2 / 3) - h) * 6);
        }
        return m1;
    };

    let {
        h, s, l, a,
    } = hsl;

    h = (number(h) % 360) / 360;
    s = clampNumber(s);
    l = clampNumber(l);
    a = clampNumber(a);

    let m2 = l &lt;= 0.5 ? l * (s + 1) : (l + s - (l * s));
    let m1 = l * 2 - m2;

    const r = {
        r: hue(h + 1 / 3) * 255,
        g: hue(h) * 255,
        b: hue(h - 1 / 3) * 255,
        a
    };

    return r;
};

/**
 * &#x5C06;&#x6570;&#x503C;&#x8F6C;&#x6362;&#x4E3A; 16 &#x8FDB;&#x5236;&#x5F62;&#x5F0F;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x8DB3; 2 &#x4F4D;&#xFF0C;&#x5219;&#x5728;&#x5B57;&#x7B26;&#x4E32;&#x524D;&#x9762;&#x8865;&#x5145; 0
 * @param {number} x &#x8981;&#x8F6C;&#x6362;&#x7684;&#x6570;&#x503C;
 * @return {string}
 * @private
 */
const toHexValue = x =&gt; {
    const xHex = x.toString(16);
    return xHex.length === 1 ? `0${xHex}` : xHex;
};

/**
 * &#x989C;&#x8272;&#x7C7B;
 *
 * @class Color
 */
export default class Color {
    /**
     * &#x5224;&#x65AD;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;&#x4E32;&#x662F;&#x5426;&#x662F;&#x989C;&#x8272;&#x503C;&#x7684;&#x6709;&#x6548;&#x8868;&#x793A;&#x65B9;&#x5F0F;
     * @param {string} hex &#x8981;&#x5224;&#x65AD;&#x7684;&#x5B57;&#x7B26;&#x4E32;
     * @return {boolean}
     * @static
     * @function
     * @memberof Color
     */
    static isColor = isColor;

    /**
     * &#x5C06; 16 &#x8FDB;&#x5236;&#x989C;&#x8272;&#x503C;&#x5B57;&#x7B26;&#x4E32;&#x8F6C;&#x6362;&#x4E3A; RGB &#x5BF9;&#x8C61;
     * @param {string} hex 16 &#x8FDB;&#x5236;&#x5B57;&#x7B26;&#x4E32;
     * @return {{r: number, g: number, b: number, a: number}}
     * @static
     * @function
     * @memberof Color
     */
    static hexToRgb = hexToRgb;

    /**
     * &#x5C06;&#x4E00;&#x4E2A; hsl &#x989C;&#x8272;&#x8868;&#x793A;&#x5BF9;&#x8C61;&#x8F6C;&#x6362;&#x4E3A; rgb &#x8868;&#x793A;&#x5BF9;&#x8C61;
     * @param {{h: number, s: number, l: number, a: number}} hsl hsl &#x8868;&#x793A;&#x5BF9;&#x8C61;
     * @return {{r: number, g: number, b: number, a: number}}
     * @static
     * @function
     * @memberof Color
     */
    static hslToRgb = hslToRgb;

    /**
     * &#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x989C;&#x8272;&#x5B9E;&#x4F8B;
     * @static
     * @param {Color|sting|object|number} r &#x53EF;&#x4EE5;&#x4E3A; Red &#x901A;&#x9053;&#x503C;&#x6216;&#x8005; hsla &#x5BF9;&#x8C61;&#x6216;&#x8005; rgba &#x5BF9;&#x8C61;&#x6216;&#x8005;&#x8868;&#x793A;&#x989C;&#x8272;&#x7684;&#x5B57;&#x7B26;&#x4E32;
     * @param {?number} g Green &#x901A;&#x9053;&#x503C;
     * @param {?number} b Blue &#x901A;&#x9053;&#x503C;
     * @param {?number} [a=1] Alpha &#x901A;&#x9053;&#x503C;
     * @return {color}
     * @memberof Color
     * @function
     */
    static create(r, g, b, a) {
        if (r instanceof Color) {
            return r;
        }
        return new Color(r, g, b, a);
    }

    /**
     * &#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x989C;&#x8272;&#x7C7B;&#x5B9E;&#x4F8B;
     *
     * @param {sting|object|number} r &#x53EF;&#x4EE5;&#x4E3A; Red &#x901A;&#x9053;&#x503C;&#x6216;&#x8005; hsla &#x5BF9;&#x8C61;&#x6216;&#x8005; rgba &#x5BF9;&#x8C61;&#x6216;&#x8005;&#x8868;&#x793A;&#x989C;&#x8272;&#x7684;&#x5B57;&#x7B26;&#x4E32;
     * @param {?number} g Green &#x901A;&#x9053;&#x503C;
     * @param {?number} b Blue &#x901A;&#x9053;&#x503C;
     * @param {?number} [a=1] Alpha &#x901A;&#x9053;&#x503C;
     * @constructor
     */
    constructor(r, g, b, a = 1) {
        this.init(r, g, b, a);
    }

    /**
     * &#x521D;&#x59CB;&#x5316;&#x989C;&#x8272;&#x503C;
     *
     * @param {sting|object|number} r &#x53EF;&#x4EE5;&#x4E3A; Red &#x901A;&#x9053;&#x503C;&#x6216;&#x8005; hsla &#x5BF9;&#x8C61;&#x6216;&#x8005; rgba &#x5BF9;&#x8C61;&#x6216;&#x8005;&#x8868;&#x793A;&#x989C;&#x8272;&#x7684;&#x5B57;&#x7B26;&#x4E32;
     * @param {?number} g Green &#x901A;&#x9053;&#x503C;
     * @param {?number} b Blue &#x901A;&#x9053;&#x503C;
     * @param {?number} [a=1] Alpha &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @return {void}
     * @instance
     */
    init(r, g, b, a = 1) {
        this.r = 0;
        this.g = 0;
        this.b = 0;
        this.A = a;

        const paramType = typeof r;
        if (paramType === &apos;string&apos;) {
            const hex = r.toLowerCase();
            if (hex === &apos;transparent&apos;) {
                this.A = 0;
            } else {
                this.rgb = hexToRgb(hex);
            }
        } else if (paramType === &apos;number&apos;) {
            this.R = r;
            this.G = g;
            this.B = b;
        } else if (paramType === &apos;object&apos;) {
            const obj = r;
            if (obj.h !== undefined) {
                const hsl = {
                    h: clampNumber(obj.h, 360),
                    s: 1,
                    l: 1,
                    a: this.A
                };
                if (obj.s !== undefined) hsl.s = clampNumber(obj.s, 1);
                if (obj.l !== undefined) hsl.l = clampNumber(obj.l, 1);
                if (obj.a !== undefined) hsl.a = clampNumber(obj.a, 1);
                this.rgb = hslToRgb(hsl);
            } else {
                this.rgb = obj;
            }
        }
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; RGB &#x683C;&#x5F0F;&#x8868;&#x793A;&#x7684; Red &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @type {number}
     * @instance
     */
    get R() {
        return this.r;
    }

    /**
     * &#x4EE5; RGB &#x683C;&#x5F0F;&#x8BBE;&#x7F6E;&#x989C;&#x8272; Red &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @param {number} r Red &#x901A;&#x9053;&#x503C;
     * @instance
     */
    set R(r) {
        this.r = convertToRgbInt(r);
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; RGB &#x683C;&#x5F0F;&#x8868;&#x793A;&#x7684; Green &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @type {number}
     * @instance
     */
    get G() {
        return this.g;
    }

    /**
     * &#x4EE5; RGB &#x683C;&#x5F0F;&#x8BBE;&#x7F6E;&#x989C;&#x8272; Green &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @param {number} r Green &#x901A;&#x9053;&#x503C;
     * @instance
     */
    set G(g) {
        this.g = convertToRgbInt(g);
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; RGB &#x683C;&#x5F0F;&#x8868;&#x793A;&#x7684; Blue &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @type {number}
     * @instance
     */
    get B() {
        return this.b;
    }

    /**
     * &#x4EE5; RGB &#x683C;&#x5F0F;&#x8BBE;&#x7F6E;&#x989C;&#x8272; Blue &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @param {number} r Blue &#x901A;&#x9053;&#x503C;
     * @instance
     */
    set B(b) {
        this.b = convertToRgbInt(b);
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; RGB &#x683C;&#x5F0F;&#x8868;&#x793A;&#x7684; Alpha &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @type {number}
     * @instance
     */
    get A() {
        return this.a;
    }

    /**
     * &#x4EE5; RGB &#x683C;&#x5F0F;&#x8BBE;&#x7F6E;&#x989C;&#x8272; Alpha &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @param {number} r Alpha &#x901A;&#x9053;&#x503C;
     * @instance
     */
    set A(a) {
        this.a = clampNumber(a, 1);
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; RGB &#x683C;&#x5F0F;&#x8868;&#x793A;&#x7684;&#x5BF9;&#x8C61;
     * @memberof Color
     * @type {{r: number, g: number, b: number, a: number}}
     * @instance
     */
    get rbg() {
        return {
            r: this.r,
            g: this.g,
            b: this.b,
            a: this.a
        };
    }

    /**
     * &#x4F7F;&#x7528; RGB &#x683C;&#x5F0F;&#x66F4;&#x65B0;&#x989C;&#x8272;&#x503C;
     * @memberof Color
     * @param {{r: ?number, g: ?number, b: ?number, a: ?number}} rgb
     * @instance
     */
    set rgb(rgb) {
        if (rgb.r !== undefined) this.R = rgb.r;
        if (rgb.g !== undefined) this.G = rgb.g;
        if (rgb.b !== undefined) this.B = rgb.b;
        if (rgb.a !== undefined) this.A = rgb.a;
    }

    /**
     * &#x4F7F;&#x7528; RGB &#x683C;&#x5F0F;&#x66F4;&#x65B0;&#x989C;&#x8272;&#x503C;
     * @readonly
     * @memberof Color
     * @param {{r: ?number, g: ?number, b: ?number, a: ?number}} rgb
     * @return {Color}
     * @instance
     */
    setRgb(rgb) {
        this.rgb = rgb;
        return this;
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; HSL &#x5F62;&#x5F0F;&#x8868;&#x793A;&#x7684;&#x5BF9;&#x8C61;
     * @memberof Color
     * @type {{h: number, s: number, l: number, a: number}}
     * @instance
     */
    get hsl() {
        const r = this.r / 255;
        const g = this.g / 255;
        const b = this.b / 255;
        // eslint-disable-next-line prefer-destructuring
        const a = this.a;

        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        let h;
        let s;
        const l = (max + min) / 2;
        const d = max - min;

        if (max === min) {
            h = s = 0;
        } else {
            s = l &gt; 0.5 ? d / (2 - max - min) : d / (max + min);

            switch (max) {
            case r:
                h = (g - b) / d + (g &lt; b ? 6 : 0);
                break;
            case g:
                h = (b - r) / d + 2;
                break;
            case b:
                h = (r - g) / d + 4;
                break;
            }
            h /= 6;
        }
        return {
            h: h * 360,
            s,
            l,
            a
        };
    }

    /**
     * &#x4F7F;&#x7528; HSL &#x5F62;&#x5F0F;&#x66F4;&#x65B0;&#x989C;&#x8272;&#x503C;
     * @memberof Color
     * @param {{h: number, s: number, l: number, a: number}} hsl
     * @instance
     */
    set hsl(hsl) {
        this.rgb = hslToRgb(hsl);
    }

    /**
     * &#x4F7F;&#x7528; HSL &#x5F62;&#x5F0F;&#x66F4;&#x65B0;&#x989C;&#x8272;&#x503C;
     * @memberof Color
     * @param {{h: number, s: number, l: number, a: number}} hsl
     * @return {Color}
     * @instance
     */
    setHsl(hsl) {
        this.hsl = Object.assign(this.hsl, hsl);
        return this;
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; HSL &#x683C;&#x5F0F;&#x8868;&#x793A;&#x7684; Hue &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @type {number}
     * @instance
     */
    get H() {
        return this.hsl.h;
    }

    /**
     * &#x4EE5; HSL &#x683C;&#x5F0F;&#x8BBE;&#x7F6E;&#x989C;&#x8272; Hue &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @param {number} r Hue &#x901A;&#x9053;&#x503C;
     * @instance
     */
    set H(hue) {
        const {hsl} = this;
        hsl.h = clampNumber(hue, 360);
        this.hsl = hsl;
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; HSL &#x683C;&#x5F0F;&#x8868;&#x793A;&#x7684; Saturate &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @type {number}
     * @instance
     */
    get S() {
        return this.hsl.s;
    }

    /**
     * &#x4EE5; HSL &#x683C;&#x5F0F;&#x8BBE;&#x7F6E;&#x989C;&#x8272; Saturate &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @param {number} r Saturate &#x901A;&#x9053;&#x503C;
     * @instance
     */
    set S(s) {
        const {hsl} = this;
        hsl.s = clampNumber(s, 1);
        this.hsl = hsl;
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; HSL &#x683C;&#x5F0F;&#x8868;&#x793A;&#x7684; Lightness &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @type {number}
     * @instance
     */
    get L() {
        return this.hsl.l;
    }

    /**
     * &#x4EE5; HSL &#x683C;&#x5F0F;&#x8BBE;&#x7F6E;&#x989C;&#x8272; Lightness &#x901A;&#x9053;&#x503C;
     * @memberof Color
     * @param {number} r Lightness &#x901A;&#x9053;&#x503C;
     * @instance
     */
    set L(l) {
        const {hsl} = this;
        hsl.l = clampNumber(l, 1);
        this.hsl = hsl;
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x5728;&#x89C6;&#x89C9;&#x4E0A;&#x7684;&#x4EAE;&#x5EA6;
     * @memberof Color
     * @readonly
     * @type {number}
     * @instance
     */
    get luma() {
        let r = this.r / 255;
        let g = this.g / 255;
        let b = this.b / 255;

        r = (r &lt;= 0.03928) ? r / 12.92 : (((r + 0.055) / 1.055) ** 2.4);
        g = (g &lt;= 0.03928) ? g / 12.92 : (((g + 0.055) / 1.055) ** 2.4);
        b = (b &lt;= 0.03928) ? b / 12.92 : (((b + 0.055) / 1.055) ** 2.4);

        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; 16 &#x8FDB;&#x5236;&#x8868;&#x793A;&#x7684;&#x5B57;&#x7B26;&#x4E32;
     * @memberof Color
     * @readonly
     * @type {string}
     * @instance
     */
    get hex() {
        return `#${toHexValue(this.r)}${toHexValue(this.g)}${toHexValue(this.b)}`;
    }

    /**
     * &#x83B7;&#x53D6;&#x989C;&#x8272;&#x4EE5; CSS &#x5141;&#x8BB8;&#x7684;&#x5F62;&#x5F0F;&#x8868;&#x793A;&#x7684;&#x5B57;&#x7B26;&#x4E32;
     * @memberof Color
     * @readonly
     * @type {string}
     * @instance
     */
    get css() {
        if (this.a &gt; 0) {
            if (this.a &lt; 1) {
                return `rgba(${this.r},${this.g},${this.b},${this.a})`;
            }
            return this.hex;
        }
        return &apos;transparent&apos;;
    }

    /**
     * &#x8C03;&#x6574;&#x989C;&#x8272;&#x4F7F;&#x5176;&#x53D8;&#x5F97;&#x66F4;&#x6697;&#xFF08;&#x6216;&#x8005;&#x66F4;&#x4EAE;&#xFF09;
     * @param {number} amount 0&#xFF5E;100 &#x8868;&#x793A;&#x7684;&#x767E;&#x5206;&#x6BD4;&#xFF0C;&#x6570;&#x503C;&#x8D8A;&#x5927;&#x5219;&#x8D8A;&#x6697;&#xFF0C;&#x5982;&#x679C;&#x8BBE;&#x7F6E;&#x4E3A;&#x8D1F;&#x6570;&#xFF08;-100~0&#xFF09;,&#x5219;&#x4F1A;&#x4F7F;&#x989C;&#x8272;&#x53D8;&#x5F97;&#x66F4;&#x4EAE;&#xFF0C;&#x6570;&#x503C;&#x8D8A;&#x5C0F;&#x5219;&#x8D8A;&#x4EAE;
     * @returns {Color} &#x8FD4;&#x56DE;&#x81EA;&#x8EAB;&#x4FBF;&#x4E8E;&#x94FE;&#x5F0F;&#x8C03;&#x7528;
     * @memberof Color
     * @instance
     */
    darken(amount) {
        const {hsl} = this;

        hsl.l -= amount / 100;
        hsl.l = clamp(hsl.l, 1);

        this.hsl = hsl;
        return this;
    }

    /**
     * &#x8C03;&#x6574;&#x989C;&#x8272;&#x4F7F;&#x5176;&#x53D8;&#x5F97;&#x66F4;&#x4EAE;&#xFF08;&#x6216;&#x8005;&#x66F4;&#x6697;&#xFF09;
     * @param {number} amount 0&#xFF5E;100 &#x8868;&#x793A;&#x7684;&#x767E;&#x5206;&#x6BD4;&#xFF0C;&#x6570;&#x503C;&#x8D8A;&#x5927;&#x5219;&#x8D8A;&#x4EAE;&#xFF0C;&#x5982;&#x679C;&#x8BBE;&#x7F6E;&#x4E3A;&#x8D1F;&#x6570;&#xFF08;-100~0&#xFF09;,&#x5219;&#x4F1A;&#x4F7F;&#x989C;&#x8272;&#x53D8;&#x5F97;&#x66F4;&#x6697;&#xFF0C;&#x6570;&#x503C;&#x8D8A;&#x5C0F;&#x5219;&#x8D8A;&#x6697;
     * @returns {Color} &#x8FD4;&#x56DE;&#x81EA;&#x8EAB;&#x4FBF;&#x4E8E;&#x94FE;&#x5F0F;&#x8C03;&#x7528;
     * @memberof Color
     * @instance
     */
    lighten(amount) {
        return this.darken(-amount);
    }

    /**
     * &#x6839;&#x636E;&#x767E;&#x5206;&#x6BD4;&#x8BBE;&#x7F6E;&#x900F;&#x660E;&#x5EA6;
     *
     * @param {number} amount 0~100 &#x8868;&#x793A;&#x7684;&#x900F;&#x660E;&#x5EA6;&#x767E;&#x5206;&#x6BD4;&#xFF0C;0 &#x4E3A;&#x5B8C;&#x5168;&#x900F;&#x660E;&#xFF0C;100 &#x4E3A;&#x5B8C;&#x5168;&#x4E0D;&#x900F;&#x660E;
     * @memberof Color
     * @returns {Color} &#x8FD4;&#x56DE;&#x81EA;&#x8EAB;&#x4FBF;&#x4E8E;&#x94FE;&#x5F0F;&#x8C03;&#x7528;
     * @instance
     */
    fade(amount) {
        this.A = clamp(amount / 100, 1);
        return this;
    }

    /**
     * &#x5728;&#x8272;&#x73AF;&#x4E0A;&#x8FDB;&#x884C;&#x65CB;&#x8F6C;
     *
     * @param {number} amount &#x65CB;&#x8F6C;&#x7684;&#x503C;
     * @return {Color} &#x8FD4;&#x56DE;&#x81EA;&#x8EAB;&#x4FBF;&#x4E8E;&#x94FE;&#x5F0F;&#x8C03;&#x7528;
     * @memberof Color
     * @instance
     */
    spin(amount) {
        const {hsl} = this;
        const hue = (hsl.h + amount) % 360;

        hsl.h = hue &lt; 0 ? 360 + hue : hue;
        this.hsl = hsl;
        return this;
    }

    /**
     * &#x6839;&#x636E;&#x767E;&#x5206;&#x6BD4;&#x8C03;&#x6574;&#x8272;&#x76F8;&#x503C;
     *
     * @param {number} amount &#x8272;&#x76F8;&#x503C; -100~100
     * @return {Color} &#x8FD4;&#x56DE;&#x81EA;&#x8EAB;&#x4FBF;&#x4E8E;&#x94FE;&#x5F0F;&#x8C03;&#x7528;
     * @memberof Color
     * @instance
     */
    saturate(amount) {
        const {hsl} = this;

        hsl.s += amount / 100;
        hsl.s = clamp(hsl.s);

        this.hsl = hsl;
        return this;
    }

    /**
     * &#x6839;&#x636E;&#x767E;&#x5206;&#x6BD4;&#x8C03;&#x6574;&#x4EAE;&#x5EA6;&#x503C;
     *
     * @param {number} amount &#x4EAE;&#x5EA6;&#x503C; -100~100
     * @return {Color} &#x8FD4;&#x56DE;&#x81EA;&#x8EAB;&#x4FBF;&#x4E8E;&#x94FE;&#x5F0F;&#x8C03;&#x7528;
     * @memberof Color
     * @instance
     */
    lightness(amount) {
        const {hsl} = this;

        hsl.l += amount / 100;
        hsl.l = clamp(hsl.l);

        this.hsl = hsl;
        return this;
    }

    /**
     * &#x6839;&#x636E;&#x5F53;&#x524D;&#x989C;&#x8272;&#x4EAE;&#x5EA6;&#x660E;&#x6697;&#x7A0B;&#x5EA6;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x5BF9;&#x6BD4;&#x8272;
     *
     * @param {?String} dark &#x5982;&#x679C;&#x5F53;&#x524D;&#x989C;&#x8272;&#x4E3A;&#x6D45;&#x8272;&#xFF0C;&#x5219;&#x8FD4;&#x56DE;&#x6B64;&#x503C;&#x6307;&#x5B9A;&#x7684;&#x6DF1;&#x8272;&#x4F5C;&#x4E3A;&#x5BF9;&#x6BD4;&#x8272;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x6307;&#x5B9A;&#x5219;&#x4F7F;&#x7528;&#x7EAF;&#x9ED1;&#x8272;
     * @param {?String} light &#x5982;&#x679C;&#x5F53;&#x524D;&#x989C;&#x8272;&#x4E3A;&#x6DF1;&#x8272;&#xFF0C;&#x5219;&#x8FD4;&#x56DE;&#x6B64;&#x503C;&#x6307;&#x5B9A;&#x7684;&#x6D45;&#x8272;&#x4F5C;&#x4E3A;&#x5BF9;&#x6BD4;&#x8272;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x6307;&#x5B9A;&#x5219;&#x4F7F;&#x7528;&#x7EAF;&#x767D;&#x8272;
     * @param {number} [threshold=0.43] &#x5224;&#x65AD;&#x662F;&#x5426;&#x4E3A;&#x6DF1;&#x8272;&#x7684;&#x9608;&#x503C;&#xFF0C;&#x53EF;&#x9009;&#x8303;&#x56F4; 0&#xFF5E;1
     * @return {Color} &#x8FD4;&#x56DE;&#x81EA;&#x8EAB;&#x4FBF;&#x4E8E;&#x94FE;&#x5F0F;&#x8C03;&#x7528;
     * @memberof Color
     * @instance
     */
    contrast(dark, light, threshold = 0.43) {
        if (light === undefined) {
            light = new Color(255, 255, 255, 1);
        } else {
            light = new Color(light);
        }
        if (dark === undefined) {
            dark = new Color(0, 0, 0, 1);
        } else {
            dark = new Color(dark);
        }

        if (dark.luma &gt; light.luma) {
            const swapTmp = light;
            light = dark;
            dark = swapTmp;
        }

        if (this.a &lt; 0.5) {
            return dark;
        }
        threshold = number(threshold);

        if (this.isDark(threshold)) {
            return light;
        }
        return dark;
    }

    /**
     * &#x5224;&#x65AD;&#x5F53;&#x524D;&#x989C;&#x8272;&#x662F;&#x5426;&#x4E3A;&#x6DF1;&#x8272;
     *
     * @param {number} [threshold=0.43] &#x5224;&#x65AD;&#x662F;&#x5426;&#x4E3A;&#x6DF1;&#x8272;&#x7684;&#x9608;&#x503C;&#xFF0C;&#x53EF;&#x9009;&#x8303;&#x56F4; 0&#xFF5E;1
     * @return {Color} &#x8FD4;&#x56DE;&#x81EA;&#x8EAB;&#x4FBF;&#x4E8E;&#x94FE;&#x5F0F;&#x8C03;&#x7528;
     * @memberof Color
     * @instance
     */
    isDark(threshold = 0.43) {
        return this.luma &lt; threshold;
    }

    /**
     * &#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x5F53;&#x524D;&#x989C;&#x8272;&#x5B9E;&#x4F8B;&#x7684;&#x526F;&#x672C;
     *
     * @return {Color}
     * @memberof Color
     * @instance
     */
    clone() {
        return new Color(this.r, this.g, this.b, this.a);
    }
}
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
